<template>
    <div class="user">
        <div class="head">
            <img class="avator" src="../assets/imgs/logo.png" alt="">
            <div class="info">
                <span class="name">
                    {{user.username || ''}}
                </span>
                <span class="slogen">
                    {{user.signature || ''}}
                </span>
            </div>
        </div>
        <div class="content">
            <van-cell title="修改个性签名" icon="edit" is-link @click="visibleSig = true" />
            <van-cell title="账户安全" icon="setting-o" is-link to="/account" />
            <van-cell title="软件评分" icon="good-job-o" is-link @click="visibleRate = true" />
            <van-cell title="关于我们" icon="smile-o" is-link to="/about" />
        </div>
        <van-dialog v-model:show="visibleSig" title="个性签名" show-cancel-button @confirm="confirmSig">
            <van-field v-model="signature" rows="2" autosize type="textarea" maxlength="20" placeholder="请输入个性签名"
                show-word-limit />
        </van-dialog>
        <van-dialog v-model:show="visibleRate" title="软件评分" show-cancel-button class="rate">
            <van-rate class="rate" v-model="rate" allow-half void-icon="star" void-color="#eee" />
        </van-dialog>
    </div>


</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import axios from '../utils/axios';
export default {
    setup() {
        const state = reactive({
            user: {},
            signature: '',
            visibleSig: false,
            visibleRate: false,
            rate: 4.5
        })

        onMounted(() => {
            getUserInfo();
        })

        const getUserInfo = async () => {

            const { data } = await axios.get('/user/get_userinfo')
            console.log(data);
            state.user = data;
            state.signature = data.signature;
        }

        const confirmSig = async () => {
            const { data } = await axios.post('/user/edit_signature', {
                signature: state.signature
            })
            state.user = data;
            state.signature = data.signature
        }
        return {
            ...toRefs(state),
            confirmSig
        }
    }
}
</script>

<style lang="scss" scoped>
.user {
    min-height: 100%;
    background-color: #f5f5f5;
    padding: 12px;

    .head {
        display: flex;
        background: linear-gradient(315deg, #7fcea4 0%, #39be77 100%);
        padding: 12px;
        border-radius: 4px;
        margin-bottom: 12px;

        .avator {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid #fff;
            margin-right: 10px;
        }

        .info {
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .name {
                font-size: 18px;
                color: #fff;
                font-weight: 500;
            }

            .slogen {
                color: #fff;
                background: rgba(0, 0, 0, 0.1);
                padding: 1px 5px;
                border-radius: 10px;
            }
        }
    }

}
</style>
<style lang="scss">
.rate {
    .van-dialog_content {
        text-align: center;
        padding: 20px 0;
    }
}
</style>